<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>陈不知代码</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .z {
            margin: 100px auto;
        }
        
        .dahe {
            position: relative;
            width: 500px;
            height: 200px;
        }
        
        .hezi {
            position: absolute;
            top: 0;
            left: 112px;
            width: 161px;
            height: 31px;
            font-size: 20px;
            background-color: beige;
            display: none;
        }
        
        input {
            margin-top: 31px;
            height: 26px;
            border: 1px solid red;
            outline: none;
        }
    </style>
    <script>
        window.addEventListener('load', function() {
            /* console.log('dayingl'); */
            var texts = document.querySelector('#int');
            /*  console.log(texts); */
            var divs = document.querySelector('.hezi');
            texts.addEventListener('keyup', function() {
                console.log('shule');
                /* divs.innerHTML = this.value; */
                if (this.value != '') {
                    divs.style.display = 'block';
                    divs.innerText = this.value;
                } else {
                    divs.style.display = 'none';
                }
            })
            texts.addEventListener('blur', function() {
                divs.style.display = 'none';
            })
            texts.addEventListener('focus', function() {
                if (this.value == '') {
                    divs.style.display = 'none';
                } else {
                    divs.style.display = 'block';
                }

            })
        })
    </script>
</head>

<body>
    <div class="dahe z">
        <div class="hezi"></div>
        请输入货单号：<input type="text" name="" id="int">
    </div>
</body>

</html>